<template>
  <div class="process">
    <div class="process-tpl-pc" v-if="showPC">
      <otherform
        :step="step"
        :status="status"
        :process-instance-id="processInstanceId"
        :process-definition-key="processDefinitionKey"
        :task-id="taskId">
      </otherform>
      <process
        :step="step"
        :status="status"
        :process-instance-id="processInstanceId"
        :task-id="taskId"></process>
    </div>
    <mobileprocess v-else
        :step="step"
        :status="status"
        :process-instance-id="processInstanceId"
        :process-definition-key="processDefinitionKey"
        :process-definition-name="processDefinitionName"
        :task-id="taskId"/>
  </div>
</template>
<script>
import processApi from '@/api/process'
import { getParameterByName } from '@/utils/util'
import otherform from '@/components/process/other/otherform-pc.vue'
import process from '@/components/process/platform/pc/process.vue'
import mobileprocess from '@/components/process/platform/mobile/process.vue'
export default {
  components: {
    otherform,
    process,
    mobileprocess,
  },
  data() {
    return {
      isPC: true,
      showPC: true,
      step: '',
      status: '',
      processInstanceId: '',
      processDefinitionKey: '',
      processDefinitionName: '',
      taskId: '',
      step: getParameterByName('route'),
      processInstanceId: getParameterByName('processInstanceId'),
      processDefinitionKey: getParameterByName('processDefinitionKey'),
      taskId: getParameterByName('taskId'),
    };
  },
  computed: {
  },
  methods: {
    judge(){
      if ( window.innerWidth > 500 ){
        this.showPC = true;
      }else {
        this.showPC = false;
      };
    },
  },
  created(){
    /* if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
      this.isPC = false;
    }else{
      this.isPC = true;
    } */
      // action:   create(流程创建)    todo（待办，对应status1） complete（已办,对应status2
    const action = getParameterByName('action');
    if ( action === 'todo' ){
      this.status = '1'
    }else if ( action === 'complete' ){
      this.status = '2'
    }else {
      this.status = action;
    }
    /* if ( action === 'create' ){
      processApi.getProcessParams(getParameterByName('processDefinitionKey')).then( res =>{
        const curData = res.data
        this.processDefinitionName = curData.processDefinitionName
      })
    } */
    this.judge();
    window.addEventListener('resize', this.judge);
  },
  destroyed(){
    window.removeEventListener('resize', this.judge);
  },
};
</script>
<style scoped lang="less">
.process{
  height: 100%;
  .process-tpl-pc{
    width: 1200px;
    margin: 0 auto;
    border: 1px solid #e8e8e8;
    padding: 20px;
  } 
}
</style>
